

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 计算属性练习</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }

        #app {
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
        }

        p {
            margin: 10px 0;
            font-size: 16px;
            color: #555;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-top: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .result {
            font-weight: bold;
            color: #007BFF;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            margin: 10px 0;
            padding: 10px;
            background: #f9f9f9;
            border-radius: 4px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .passed {
            color: green;
        }

        .failed {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>插值表达式</h1>
        <p>a = {{ a }}, b = {{ b }}, c = {{ c }}</p>
        <p>插值表达式计算: <span class="result">{{ a * b + b * c + a * c }}</span></p>
        <p>计算属性: <span class="result">{{ result }}</span></p>
        <h1>练习</h1>
        <p>输入圆的半径: <input type="text" v-model="r" /></p>
        <p>周长是: <span class="result">{{ 2 * 3.1415926 * r }}</span></p>
        <p>周长是: <span class="result">{{ permeter }}</span></p>
        <h1>例子2</h1>
        <p>姓: <input type="text" v-model="firstName" /></p>
        <p>名: <input type="text" v-model="lastName" /></p>
        <p>姓名: <input type="text" v-model.lazy="fullName" /></p>
        <h1>例子3 过滤数组</h1>
        <h2>及格学生</h2>
        <ul>
            <li v-for="s in passStudent" :class="{'passed': s.score >= 60}">
                {{ s.name }}, {{ s.score }}
            </li>
        </ul>
        <hr />
        <h2>不及格学生</h2>
        <ul>
            <li v-for="s in uppassStudent" :class="{'failed': s.score < 60}">
                {{ s.name }}, {{ s.score }}
            </li>
        </ul>
    </div>

    <script>
        var app = Vue.createApp({
            data() {
                return {
                    a: 10,
                    b: 20,
                    c: 30,
                    r: 0,
                    firstName: "",
                    lastName: "",
                    stus: [
                        { name: "张飞", score: 50 },
                        { name: "张三", score: 90 },
                        { name: "张三丰", score: 53 },
                        { name: "李四", score: 99 },
                        { name: "王五", score: 100 }
                    ]
                }
            },

            computed: {
                passStudent() {
                    return this.stus.filter(s => s.score >= 60);
                },
                uppassStudent() {
                    return this.stus.filter(s => s.score < 60);
                },
                result() {
                    return this.a * this.b + this.b * this.c + this.a * this.c;
                },
                permeter() {
                    return 2 * 3.1415926 * this.r;
                },
                fullName: {
                    set(newValue) {
                        let newValu = newValue.trim();
                        let names = newValue.split(" ");
                        console.log(names);
                        this.firstName = names[0];
                        this.lastName = names[names.length - 1];
                    },
                    get() {
                        return this.firstName + " " + this.lastName;
                    }
                }
            }
        });
        var vm = app.mount("#app");
    </script>
</body>
</html>